<template>
  <el-dialog
    :visible.sync="dialogVisible"
    title="设备名称+sn"
    width="1200px"
    @close="handleClose"
    :append-to-body="true"
    custom-class="dialog-copy"
  >
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      :header-cell-style="{ background: '#eff3f8', color: '#333' }"
      stripe
      size="small"
      max-height="700"
      highlight-selection-row
      border
    >
      <el-table-column
        v-for="item in tableHeader"
        :key="item.title"
        :label="item.title"
        :min-width="item.width"
        :align="item.align"
        :prop="item.prop"
        sortable
      >
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row, 'cancel')"
            type="text"
            size="small"
            >取消授权</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          updateTime: "2016-05-03",
          name: "王小虎",
          projectName: "久诺新能源",
          projectAdmin: "13204053226",
          company: "鑫源直属项目管理平台",
          totleNum: "13654079988",
          status: true,
          personInCharge: "普通用户",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      tableHeader: [
        {
          title: "登录名称",
          prop: "projectName",
          width: "150",
          visible: true,
          align: "left",
        },
        {
          title: "用户姓名",
          prop: "projectAdmin",
          width: "120",
          visible: true,
          align: "left",
        },
        {
          title: "所属企业",
          prop: "company",
          width: "150",
          visible: true,
          align: "left",
        },
        {
          title: "手机",
          prop: "totleNum",
          width: "120",
          visible: true,
          align: "center",
        },
        {
          title: "用户状态",
          prop: "status",
          width: "100",
          visible: true,
          align: "center",
        },
        {
          title: "到期时间",
          prop: "updateTime",
          width: "120",
          visible: true,
          align: "center",
        },
        {
          title: "创建时间",
          prop: "date",
          width: "150",
          visible: true,
          align: "center",
        },
        {
          title: "备注",
          prop: "mark",
          width: "120",
          visible: true,
          align: "center",
        },
      ],
    };
  },
  computed: {
    dialogVisible: {
      get() {
        return this.value; // 返回父组件通过 v-model 传递的值
      },
      set(val) {
        this.$emit("close", val); // 当 dialogVisible 变化时，通知父组件更新
      },
    },
  },
  methods: {
    handleClose() {
      this.dialogVisible = false; // 关闭弹窗
      this.$emit("close"); // 发送关闭事件给父组件
    },
    handleClick(row, field) {
      switch (field) {
        case "cancel":
          this.$confirm(
            `确认取消当前用户授权吗?`,
            "系统提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          ).then(() => {
            this.$message({
              type: "success",
              message: "取消成功!",
            });
          });
          break;
        default:
          break;
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.more-set {
  max-height: 600px;
  overflow-y: auto;
}
.multiple-set-contain {
  border: 1px solid #dcdfe6;
  margin-bottom: 5px;
  border-radius: 8px;
  background-color: #fff;
  .multiple-set-eqiupNo {
    padding: 15px 20px;
    border-bottom: 1px solid #dcdfe6;

    display: flex;
    align-items: center;
    font-weight: bold;
    color: #75777b;
  }
  .multiple-set-contain-item {
    width: 90%;
    margin-left: 20px;
    .el-dialog__body .el-form-item {
      padding: 3px 0;
    }
  }
}
.multiple-confirm {
  width: 250px;
  margin: 20px auto;
  text-align: center;
  padding: 10px;
  border-radius: 20px;
  color: #fff;
  background: #02439e;
  cursor: pointer;
}
</style>
